<!DOCTYPE html>
<html>
<head>
<title>SP企业</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- 全局css -->
    <link href="../css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link rel="stylesheet" href="../fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="../js/plugins/elementui/index.css">
    <link rel="stylesheet" href="../js/plugins/toastr/toastr.css">
	<link rel="stylesheet" href="../css/skins/style.css" >
    <link rel="stylesheet" href="../css/common.css" >
    <link rel="stylesheet" href="../css/sys.css" >

    <!-- 全局js -->
    <script src="../js/plugins/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/vue/vue.min.js"></script>
    <script src="../js/plugins/elementui/index.js"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../js/plugins/toastr/toastr.min.js"></script>
    <script src="../js/plugins/tableExport/libs/FileSaver/FileSaver.min.js"></script>
    <script src="../js/plugins/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
    <script src="../js/plugins/tableExport/tableExport.min.js"></script>
    <script src="../js/common.js"></script>

</head>
<body class="gray-bg">

<div class="wrapper-content" id="rrapp" v-cloak>
    <div class="row cmm">
        <div class="col-sm-12">
        		<!--列表 begin-->
            <div class="ibox " v-show="showList">
                <div class="ibox-title">
                    <h5>SP企业</h5>
                    <div class="ibox-tools" >
                        <button v-if="hasPermission('entsp:save')" class="btn btn-primary " @click="add">
                            <i class="fa fa-plus"></i>&nbsp;新增
                        </button>

                        <button class="btn btn-info "  v-if="false">
                            <i class="fa fa-filter"></i>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row" >
                        <div class="search">
                            <div class="form-group col-sm-2">
                                <input type="text" class="form-control" v-model="q.searchName" @keyup.enter="query"  placeholder="名称">
                            </div>
                            <a class="btn btn-info" @click="query"><i class="fa fa-search"></i> 查询</a>
                        </div>
                        <div class="export">
                            <div class="ibox-tools" >
                                <el-dropdown size="medium" split-button type="default" @click="exportExl" @command="handleCommand">
                                    <i class="fa fa-download"></i> 导出数据
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="a">csv</el-dropdown-item>
                                        <el-dropdown-item command="b">txt</el-dropdown-item>
                                        <el-dropdown-item command="c">Excel</el-dropdown-item>
                                        <el-dropdown-item command="d">服务器下载</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                        <div class="dataTable">
			                <table id="data" class="table table-bordered table-hover">
			                    <thead class="thead-default">
			                      <tr>
			                        <th class="text-center" style="width: 50px">#</th>
			                        <th class="text-center" v-for="ols in columnsList">{{ols.name}}</th>
			                        <th class="text-center" style="width: 150px">操作</th>
			                      </tr>
			                    </thead>
			                    <tbody>
			                      <tr v-for="(item,index) in dataList">
			                        <td class="text-center">{{index+1}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{item.spName}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{item.spNumber}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{item.email}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{item.mobile}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{spLevelMap[item
			                         .spLevel]}}</td>
			                         <td class="text-center" v-if="columnsList[0].isShow">{{statusMap[item
			                         .status]}}</td>
			                        <td class="text-center">
			                            <button class="btn btn-xs btn-primary btn-outline" @click="view(item.spId)" >
			                              <i class="fa fa-eye"></i>查看
			                            </button>
			                            <button class="btn btn-xs btn-info btn-outline" @click="update(item.spId)" v-if="false">
			                              <i class="fa fa-edit"></i>修改
			                            </button>
			                            <button class="btn btn-xs btn-danger btn-outline" @click="delOne(item.spId)">
			                              <i class="fa fa-trash-o"></i>删除
			                            </button>
			                        </td>
			                      </tr>
			                    </tbody>
			                </table>
                            <div class="text-center" v-show="dataList.length == 0">没有数据</div>
                            <div class="text-right" v-show="dataList.length > 0">
                                <el-pagination
                                        @size-change="pageSizeChange"
                                        @current-change="pageCurrentChange"
                                        :current-page="page.page"
                                        :page-sizes="[30, 50, 100, 200]"
                                        :page-size="30"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="page.total">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--列表 end-->
            
        		<!--输入 begin-->
            <div class="ibox " v-show="!showList">
                <div class="ibox-title">
                    <h5>{{title}}SP企业</h5>
                    <div class="ibox-tools" >
						<a  class="btn btn-default" @click="reload"><i class="fa fa fa-mail-reply"></i>&nbsp;返回</a>
                    </div>
                </div>
                <div class="ibox-content">


						<el-tabs v-model="activeName">
							<el-tab-pane label="基本信息" name="first">
								<div class="panel-vue dataInput">
								<el-form  class="form-horizontal" :model="entSp" ref="entSpForm" :rules="rules">
									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>SP名称:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="spName">
												<el-input v-show="!showView" v-model="entSp.spName"
														  auto-complete="off"></el-input>
												<div class="el-view-content" v-show="showView"> {{entSp.spName}}</div>
											</el-form-item>

										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>SP接入号:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="spNumber">
												<el-input v-show="!showView" v-model="entSp.spNumber"
														  auto-complete="off"></el-input>
												<div class="el-view-content" v-show="showView"> {{entSp.spNumber}}</div>
											</el-form-item>

										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>邮箱:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="email">
												<el-input v-show="!showView" v-model="entSp.email"
														  auto-complete="off"></el-input>
												<div class="el-view-content" v-show="showView"> {{entSp.email}}</div>
											</el-form-item>

										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>手机号码:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="mobile">
												<el-input v-show="!showView" v-model="entSp.mobile"
														  auto-complete="off"></el-input>
												<div class="el-view-content" v-show="showView"> {{entSp.mobile}}</div>
											</el-form-item>

										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>地址:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="spAddress">
												<el-input v-show="!showView" type="textarea" :rows="3"
														  v-model="entSp.spAddress" auto-complete="off"></el-input>
												<div class="el-view-content" v-show="showView"> {{entSp.spAddress}}</div>
											</el-form-item>
										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>sp等级:</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="spLevel">
												<el-radio-group v-show="!showView" v-model="entSp.spLevel">
													<el-radio v-for="(item,index) in spLevelList" :label="item.value">{{item.text}}</el-radio>
												</el-radio-group>
												<div class="el-view-content" v-show="showView">{{spLevelMap[entSp.spLevel]}}</div>
											</el-form-item>
										</el-col>
									</el-row>

									<el-row class="form-group">
										<el-col :xs="24" :span="6"  class="control-label">
											<span>状态  :</span>
										</el-col>
										<el-col :xs="24" :span="18">
											<el-form-item prop="status">
												<el-radio-group v-show="!showView" v-model="entSp.status">
													<el-radio v-for="(item,index) in statusList" :label="item.value">{{item.text}}</el-radio>
												</el-radio-group>
												<div class="el-view-content" v-show="showView">{{statusMap[entSp.status]}}</div>
											</el-form-item>
										</el-col>
									</el-row>

								</el-form>
								<div class="text-center">
									<a v-show="!showView" v-if="hasPermission('entsp:save')" class="btn btn-primary"
									   @click="saveOrUpdate"><i class="fa fa-save"></i>&nbsp;保存</a>
									<a v-show="showView" v-if="hasPermission('entsp:update')" class="btn btn-primary" @click="view2update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
									<a v-show="!showView" class="btn btn-default" @click="update2view"><i class="fa fa fa-mail-reply"></i>&nbsp;
										取消</a>
								</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="SP用户" name="second">
								<div class="export">
									<div class="ibox-tools" >
										<button v-if="hasPermission('entsp:save')" class="btn btn-sm btn-primary "
												@click="addUser">
											<i class="fa fa-plus"></i>&nbsp;新增用户
										</button>
									</div>
								</div>
								<div class="dataTable">

									<table  class="table table-bordered table-hover">
										<thead class="thead-default">
										<tr>
											<th class="text-center" style="width: 50px">#</th>
											<th class="text-center" v-for="ols in userColumnsList">{{ols.name}}</th>
											<th class="text-center" style="width: 150px">操作</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(item,index) in spUserList">
											<td class="text-center">{{index+1}}</td>
											<td class="text-center" v-if="columnsList[0].isShow">{{item.userId}}</td>
											<td class="text-center" v-if="columnsList[0].isShow">{{item.userName}}</td>
											<td class="text-center" v-if="columnsList[0].isShow">{{userTypeMap[item
												.userType]}}</td>
											<td class="text-center" v-if="columnsList[0].isShow">{{statusMap[item
												.status]}}</td>
											<td class="text-center">
												<button class="btn btn-xs btn-info btn-outline"
														@click="editUser(item)">
													<i class="fa fa-edit"></i>修改
												</button>
												<button class="btn btn-xs btn-danger btn-outline"
														@click="delOneUser(item.userId)">
													<i class="fa fa-trash-o"></i>删除
												</button>
											</td>
										</tr>
										</tbody>
									</table>
									<div class="text-center" v-show="dataList.length == 0">没有数据</div>

								</div>
							</el-tab-pane>
						</el-tabs>


                </div>
            </div>
            <!--输入 end-->

			<el-dialog title="新增用户" :visible.sync="addUserView" width="550px" height="450px">
				<div class="menu-add panel-vue ">
					<el-form class="form-horizontal" :model="spUser" ref="addUserForm" :rules="userRules">

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>用户名:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="userName">
									<el-input v-show="!showUserView" v-model="spUser.userName"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUser.userName}}</div>
								</el-form-item>

							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>密码:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="password">
									<el-input v-show="!showUserView" v-model="spUser.password"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUser.password}}</div>
								</el-form-item>

							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>手机号:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="mobile">
									<el-input v-show="!showUserView" v-model="spUser.mobile"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUser.mobile}}</div>
								</el-form-item>

							</el-col>
						</el-row>


						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>用户类别:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="userType">
									<el-radio-group v-show="!showUserView" v-model="spUser.userType">
										<el-radio v-for="(item,index) in userTypeList" :label="item.value">{{item.text}}</el-radio>
									</el-radio-group>
									<div class="el-view-content" v-show="showUserView">{{userTypeMap[spUser.userType]}}</div>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>状态:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="status">
									<el-radio-group v-show="!showUserView" v-model="spUser.status">
										<el-radio v-for="(item,index) in statusList" :label="item.value">{{item.text}}</el-radio>
									</el-radio-group>
									<div class="el-view-content" v-show="showUserView">{{statusMap[spUser.status]}}</div>
								</el-form-item>
							</el-col>
						</el-row>


						<el-row class="form-group" >
							<el-col class="text-center" :span="24">
								<el-button @click="addUserView = false">取 消</el-button>
								<el-button type="primary" @click="saveUser">确 定</el-button>
							</el-col>
						</el-row>

						</el-form-item>
					</el-form>
				</div>
			</el-dialog>



			<el-dialog title="修改用户" :visible.sync="editUserView" width="550px" height="450px">
				<div class="menu-add panel-vue ">
					<el-form class="form-horizontal" :model="spUserEdit" ref="editUserForm" :rules="userEditRules">

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>用户名:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="userName">
									<el-input v-show="!showUserView" v-model="spUserEdit.userName"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUserEdit.userName}}</div>
								</el-form-item>

							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>密码:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="password">
									<el-input v-show="!showUserView" v-model="spUserEdit.password"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUserEdit.password}}</div>
								</el-form-item>

							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>手机号:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="mobile">
									<el-input v-show="!showUserView" v-model="spUserEdit.mobile"
											  auto-complete="off"></el-input>
									<div class="el-view-content" v-show="showUserView"> {{spUserEdit.mobile}}</div>
								</el-form-item>

							</el-col>
						</el-row>


						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>用户类别:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="userType">
									<el-radio-group v-show="!showUserView" v-model="spUserEdit.userType">
										<el-radio v-for="(item,index) in userTypeList" :label="item.value">{{item.text}}</el-radio>
									</el-radio-group>
									<div class="el-view-content" v-show="showUserView">{{userTypeMap[spUserEdit.userType]}}</div>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row class="form-group">
							<el-col :xs="24" :span="6"  class="control-label">
								<span>状态:</span>
							</el-col>
							<el-col :xs="24" :span="18">
								<el-form-item prop="status">
									<el-radio-group v-show="!showUserView" v-model="spUserEdit.status">
										<el-radio v-for="(item,index) in statusList" :label="item.value">{{item.text}}</el-radio>
									</el-radio-group>
									<div class="el-view-content" v-show="showUserView">{{statusMap[spUserEdit.status]}}</div>
								</el-form-item>
							</el-col>
						</el-row>


						<el-row class="form-group" >
							<el-col class="text-center" :span="24">
								<el-button @click="editUserView = false">取 消</el-button>
								<el-button type="primary" @click="updateUser">确 定</el-button>
							</el-col>
						</el-row>

						</el-form-item>
					</el-form>
				</div>
			</el-dialog>

		</div>
    </div>
</div>

<script src="../spmgt/js/entSp.js"></script>
</body>
</html>
